<template>
  <a-modal
    centered
    :width="640"
    :title="modifyEntity.title"
    :visible="modifyEntity.showModify"
    @cancel="handleRefresh"
  >
    <!--保存按钮-->
    <template slot="footer">
      <a-row>
        <a-col :span="8">
          <a-tag color="blue"> 操作完是否继续？</a-tag>
          <a-switch v-model="hasClose" :loading="loading">
            <a-icon slot="checkedChildren" type="check" />
            <a-icon slot="unCheckedChildren" type="close" />
          </a-switch>
        </a-col>
        <a-col :span="8" :offset="8">
          <a-button @click="handleRefresh" v-if="readOnly">取消</a-button>
          <a-button
            icon="reload"
            v-if="!readOnly"
            @click="handleReset"
            :loading="loading"
            >重置</a-button
          >
          <a-divider type="vertical" v-if="!readOnly" />
          <a-button
            icon="check-circle"
            v-if="!readOnly"
            :loading="loading"
            @click="handleSubmit"
            >保存</a-button
          >
        </a-col>
      </a-row>
    </template>

    <a-spin :spinning="spinning">
      <a-form :form="form">
        <a-form-item
          label="选择的部门"
          :labelCol="{ span: 4 }"
          :wrapperCol="{ span: 18 }"
        >
          <a-tree-select
            tree-data-simple-mode
            tree-default-expand-all
            placeholder="请选择组织部门"
            @change="orgChange"
            v-decorator="['organizeId']"
            :disabled="readOnly"
            :treeData="orgs"
            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
          />
        </a-form-item>

        <a-form-item
          label="名称"
          :labelCol="{ span: 4 }"
          :wrapperCol="{ span: 18 }"
        >
          <a-input
            :disabled="readOnly"
            v-decorator="[
              'name',
              { rules: [{ required: true, message: '请输入名称' }] },
            ]"
          />
        </a-form-item>

        <a-form-item
          label="岗位职级"
          :labelCol="{ span: 4 }"
          :wrapperCol="{ span: 18 }"
        >
          <a-input-number
            :disabled="readOnly"
            :max="999"
            :min="1"
            style="width:100%"
            v-decorator="[
              'level',
              { rules: [{ required: true, message: '请输入岗位职级' }] },
            ]"
          />
        </a-form-item>

        <a-form-item
          label="岗位编码"
          :labelCol="{ span: 4 }"
          :wrapperCol="{ span: 18 }"
        >
          <a-input
            :disabled="readOnly"
            v-decorator="[
              'code',
              { rules: [{ required: true, message: '请输入岗位编码' }] },
            ]"
          />
        </a-form-item>

        <a-form-item
          label="描述"
          :labelCol="{ span: 4 }"
          :wrapperCol="{ span: 18 }"
        >
          <a-textarea
            :disabled="readOnly"
            v-decorator="['description']"
            placeholder="请输入描述"
            :rows="4"
          />
        </a-form-item>

        <a-row>
          <a-col :span="12">
            <a-form-item
              label="状态"
              :label-col="labelCol"
              :wrapper-col="wrapperCol"
            >
              <a-switch
                :disabled="readOnly"
                v-decorator="[
                  'status',
                  { valuePropName: 'checked', initialValue: true },
                ]"
                un-checked-children="冻结"
                checked-children="正常"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              label="是否删除"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              required
            >
              <a-switch
                :disabled="readOnly"
                v-decorator="[
                  'deleteFlag',
                  { valuePropName: 'checked', initialValue: false },
                ]"
                un-checked-children="否"
                checked-children="是"
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row v-if="this.readOnly">
          <a-col :span="12">
            <a-form-item
              label="创建时间"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input :disabled="readOnly" v-decorator="['createTime']" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              label="创建人"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input :disabled="readOnly" v-decorator="['createUser']" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row v-if="this.readOnly">
          <a-col :span="12">
            <a-form-item
              label="修改时间"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input :disabled="readOnly" v-decorator="['updateTime']" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              label="修改人"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input :disabled="readOnly" v-decorator="['updateUser']" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script> 
import { queryOrgTreeSelect } from "@/api/sys/identity/org";
import {
  getPosition,
  addPosition,
  updatePosition,
} from "@/api/sys/identity/position";
export default {
  props: {
    modifyEntity: {
      type: Object,
      required: true,
      default: function () {
        return {
          // 传递的主键
          id: "",
          // 页面标题
          title: "新增岗位信息",
          // 页面操作类型
          operation: this.operationFlag.Add,
          // 是否展示编辑页面
          showModify: false,
        };
      },
    },
    // 组织纬度ID
    orgDimId: {
      type: String,
      require: true,
    },
  },
  data() {
    return {
      labelCol: { xs: { span: 24 }, sm: { span: 8 } },
      wrapperCol: { xs: { span: 24 }, sm: { span: 14 } },
      // 执行保存后是否关闭当前页面
      hasClose: false,
      // 遮罩层加载
      spinning: false,
      // 按钮加载状态
      loading: false,
      // 只读状态
      readOnly: false,
      form: this.$form.createForm(this),
      entity: {},
      orgs: [],
    };
  },
  mounted() {
    this.loadData();
    queryOrgTreeSelect({ orgDimId: this.orgDimId }).then((res) => {
      this.orgs = res.data;
    });
  },
  methods: {
    //#region  下拉数据
    orgChange(val) {
      if (val) {
        this.form.setFieldsValue({ organizeId: val });
      }
    },
    //#endregion
    //#region 加载数据
    loadData() {
      this.readOnly =
        this.modifyEntity.operation === this.operationFlag.Detail
          ? true
          : false;
      this.form.resetFields(); // 重置参数值
      //修改，详情获取详细信息
      if (this.modifyEntity.operation !== this.operationFlag.Add) {
        let that = this;
        this.spinning = true;
        getPosition(this.modifyEntity.id )
          .then((res) => {
            that.entity = res.data;
            var setData = {};
            Object.keys(that.form.getFieldsValue()).forEach((item) => {
              setData[item] = that.entity[item];
            });
            that.form.setFieldsValue(setData);
            that.spinning = false;
          })
          .catch((error) => {
            that.spinning = false;
          });
      }
    },
    //#endregion

    //#region 保存
    // 保存
    handleSubmit() {
      let that = this;
      this.spinning = true;
      this.form.validateFields((errors, values) => {
        if (!errors) {
          if (that.modifyEntity.operation === that.operationFlag.Add) { 
            addPosition(values).then((res) => {
              that.submitResult(res);
            });
          } else {
            that.entity = Object.assign(
              that.entity,
              that.form.getFieldsValue()
            );
            updatePosition(that.entity).then((res) => {
              that.submitResult(res);
            });
          }
        } else {
          this.spinning = false;
        }
      });
    },
    // 保存结果
    submitResult(res) {
      if (res.code==200) {
        this.$notification.success({ description: res.msg });
        if (!this.hasClose) {
          this.$emit("handleRefresh");
        }
      } else {
        this.$notification.error({ description: res.msg });
      }
      this.spinning = false;
    },
    //#endregion

    //#region  取消、关闭、重置
    // 取消、关闭
    handleRefresh() {
      this.spinning = false;
      this.$emit("handleRefresh");
    },
    // 重置
    handleReset() {
      this.loadData();
    },
    //#endregion
  },
};
</script>
